<template>
  <div class="menu">
    <div class="menu-list">
      <div class="menu-item">
        <div class="menu-title" @click="shouye">
          首页
          <!--<img src="@/assets/more.png" />-->
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">学会概况</div>
        <div class="dia">
          <div @click="goto">学会介绍</div>
          <div>组织架构</div>
          <div>学会章程</div>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">新闻动态</div>
        <div class="dia">
          <div @click="gonews">学会新闻</div>
          <div @click="goevents">活动预告</div>
          <div @click="gonotices">通知公告</div>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">学术交流</div>
        <div class="dia">
          <div @click="goacad">学术论文</div>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">联系我们</div>

        <div class="dia">
          <div>联系方式</div>
        </div>
      </div>
      <div class="menu-item">
        <div class="menu-title">会员中心</div>

        <div class="dia">
          <div>会员权益</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const goto = () => {
  const routeData = router.resolve("/news");
  window.open(routeData.href, "_blank");
};
const gonews = () => {
  const routeData = router.resolve("/allnews");
  window.open(routeData.href, "_blank");
};
const goevents = () => {
  const routeData = router.resolve("/allevents");
  window.open(routeData.href, "_blank");
};
const gonotices = () => {
  const routeData = router.resolve("/allnotication");
  window.open(routeData.href, "_blank");
};
const goacad = () => {
  const routeData = router.resolve("/allacademic");
  window.open(routeData.href, "_blank");
};
const shouye = () => {
   router.push('/home');
};
</script>
<style lang="scss" scoped>
.menu {
  width: 100%;
  height: 3.125rem;
  background-color: #8aaee6;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-bottom: 3.8125rem;
  box-sizing: border-box;
  // .menu-left {
  //   width: 22.5rem;
  // }
  .menu-list {
    width: 90rem;
    height: 2.5rem;
    background-image: url("@/assets/menu-bg.png");
    background-size: 100% 100%;
    margin-bottom: -0.125rem;
    padding: 0 1.875rem;
    display: flex;
    align-items: end;
    justify-content: space-around;
    .menu-item {
      font-weight: 600;
      font-size: 1.0625rem;
      color: #2a4075;
      line-height: 1.5625rem;
      position: relative;
      cursor: pointer;
      transition: 0.3s;
      z-index: 99;
      .menu-title {
        position: relative;
        z-index: 2; // 确保.menu-title总是在.dia之上
      }
      .dia {
        position: absolute;
        width: 12.5rem;
        left: -2.5rem;
        background-color: #e7eaebe6;
        line-height: 3rem;
        z-index: 1;
        opacity: 0;
        transition: 1s;
        transform: translateY(0.3rem);
        pointer-events: none;
        transition: opacity 1s;
        > div {
          border-bottom: 0.0625rem solid #dfe2e730;
          font-weight: 400;
          font-size: 0.9375rem;
          text-align: center;
        }
        :last-child {
          border: 0;
        }
      }
      &:hover .dia {
        opacity: 1;
        pointer-events: auto; // 当.menu-title悬停时，允许事件传播到.dia
      }
    }
    .menu-item:hover {
      transform: scale(1.1);
      z-index: 99;
    }
    .menu-item:hover .dia {
      opacity: 1;
      transform: translateY(0);
      z-index: 99;
    }
  }
}
</style>
